<template>
	<view class="content">
		<!-- <u-count-to :startVal="30" :endVal="500"></u-count-to> -->
		<!-- {{test}} -->
		<!-- <zTabbar :indexValue ="0"></zTabbar> -->
		<view class="banner_detail">
			<view class="title_info">
				<view class="school">四川交通职业技术学院</view>
				<view class="message">
					<image src="/static/index/message.png" mode=""></image>
				</view>
			</view>
			<view class="search">
				<u--input
					    placeholder="搜索店铺或者商品"
					    prefixIcon="search"
					    prefixIconStyle="font-size: 22px;color: #909399"
						border="bottom "
						:customStyle="{height: '60rpx'}"
					></u--input>
					<view class="btn">
						搜索
					</view>
			</view>
			<view class="notice">
			      <u-notice-bar :text="noticeText" direction="column"></u-notice-bar>
			</view>
			<view class="swipper">
				  <u-swiper
				            :list="bannerList"
				            indicator
				            indicatorMode="dot"
				            circular
							height="200"
							radius="10"
							indicatorActiveColor="#F5AC3C"
				    ></u-swiper>
			</view>
			<view class="service">
				<!-- <view class="title">
					其他服务
				</view> -->
				<div class="des">
					<div class="des_item">
						<div class="icon">
							<image src="/static/index/kuaidi.png" mode=""></image>
						</div>
						<div class="font" @click="goDelivery">
							<div class="top">代取快递</div>
							<div class="bot">代取/寄到宿舍</div>
						</div>
					</div>
					<div class="des_item">
						<div class="icon">
							<image src="/static/index/zhongbao.png" mode=""></image>
						</div>
						<div class="font">
							<div class="top">众包任务</div>
							<div class="bot">任务接单赚钱</div>
						</div>
					</div>
				</div>
			</view>
			<view class="classfy">
				<view class="count" @click="goShop">
					<view class="icon">
						<image src="/static/index/rice.png" mode=""></image>
					</view>
					<view class="font">
						简餐盖饭
					</view>
				</view>
				
				<view class="count" @click="goShop" >
					<view class="icon">
						<image src="/static/index/mian.png" mode=""></image>
					</view>
					<view class="font">
						米粉面馆
					</view>
				</view>
				
				<view class="count" @click="goShop" >
					<view class="icon">
						<image src="/static/index/lingshi.png" mode=""></image>
					</view>
					<view class="font">
						小吃奶茶
					</view>
				</view>
				
			</view>

			<view class="recom">
				<!-- <image src="https://images.common.think1st.cn/hyl/tuijian.jpg" mode=""></image> -->
				
				<view class="lf">
					<image src="/static/hot.png" mode=""></image>
					今日推荐	
				</view>
				<view class="rg">
					<view class="more" @click="showMore">
						查看更多<u-icon name="arrow-right" color="#aaa" size="16"></u-icon>
					</view>
					
				</view>
			</view>
			<view class="detail">
				<view class="speacl" @click="goFood" v-for="item,index in 3"  :key="index">
				<view class="food_item" >
					<view class="lf">
						<image src="/static/index/food.png" mode=""></image>
					</view>
					<view class="rg">
						<view class="name">成都担担面</view>
						<view class="sale">月售1345单</view>
						<view class="out">
							<text>起价：</text>
							<text style="color: #ED2121 ;">￥9.9</text>
							<text style="margin-left: 20rpx;">配送：</text>
							<text style="color: #ED2121 ;">￥1</text>
							</view>
					</view>
					<view class="time">
						<view class="state">
							营业中
						</view>
						<div class="hour">
							36分钟
						</div>
					</view>
				</view>
				<!-- <view class="show_bot">
					<div class="count_deal" v-for="item,index in 3" :key="index"> 
						<div class="img_deal">
							<image src="/static/index/food.png" mode=""></image>
						</div>
						<view class="food_name">
							花甲米线
						</view>
						<view class="money">
							￥11
						</view>
					</div>
					
				</view> -->
			</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 接口示例
	// import {getTitleApi} from '../../service/api.js'
	// 组件引入
	// import zTabbar from '../../components/z-tabbar/z-tabbar.vue'
	export default {
		data() {
			return {
				noticeText:[
					'今日下单买一送一！',
					'小程序今日正式上线！',
					'全场优惠！'
				],
				 bannerList: [
				                    'https://images.common.think1st.cn/hyl/banner1.png',
				                    'https://images.common.think1st.cn/hyl/banner2.png',
				                    'https://images.common.think1st.cn/hyl/banner3.png',
				                ],
			};
		},
		methods:{
			goDelivery() {
				uni.navigateTo({
					url:'/SubPages/delivery/delivery'
				})
			},
			goShop() {
				uni.navigateTo({
					url:'/SubPages/shoplist/shoplist'
				})
			},
			goFood() {
				uni.navigateTo({
					url:'/SubPages/placeorder/wx-placeorder'
				})
			},	
			showMore() {
				uni.navigateTo({
					url:'/SubPages/shoplist/shoplist'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.banner_detail {
			height: 70vh;
			background: linear-gradient( #F5AC3C,#fff);
		}
		.search {
			background-color: #fff;
			margin: 20rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			.btn {
				background-color: #F5AC3C;
				color: #fff;
				margin-right: 20rpx;
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
			}
		}
		.notice {
			margin: 15rpx 20rpx;
			border-radius: 20rpx;
		}
		.swipper {
			margin:25rpx;
		}
		.classfy {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			margin: 0 25rpx;
			margin-top: 10rpx;
			border-radius: 25rpx;
			padding: 0 20rpx;
			.count {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx;
			}
			.font {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			.icon {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.service {
			padding: 25rpx 30rpx;
			.title {
				font-weight: 700;
			}
			.des {
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				.des_item {
					display: flex;
					align-items: center;
					.icon {
						display: flex;
						align-items: center;
						image {
							width: 60rpx;
							height: 60rpx;
						}
					}
					.font {
						margin-left: 20rpx;
						.top {
							margin-bottom: 10rpx;
							font-weight: 700;
							font-size: 28rpx;	
						}
						.bot {
							color:#aaa;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.recom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx;
			.lf {
				font-size: 32rpx;
				font-weight: 700;
				display: flex;
				align-items: center;;
				image {
					width: 45rpx;
					height: 45rpx;
					margin-right: 10rpx;
				}
			}
			.rg {
				font-size: 28rpx;
				color: #aaa;
				.more {
					display: flex;
					align-items: center;
				}
			}
			
		}
		.title_info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:  20rpx 30rpx;
			.school {
				color: #fff;
			}
			.message {
				display: flex;
				align-items: center;
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			
		}
		.detail {
			margin-top: 30rpx;
			padding: 0 25rpx;
			// padding-bottom: 120rpx;
			.food_item {
				display: flex;
				align-items: center;
				// border-bottom: 1rpx solid #f4f4f4;
				// padding-bottom: 30rpx;
				.lf {
					width: 20%;
					display: flex;
					justify-content: center;
					image {
						height: 125rpx;
						width: 125rpx;
						border-radius: 10rpx;
					}
				}
				.rg {
					width: 60%;
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					margin-left: 20rpx;
					.name {
						font-size: 28rpx;
					}
					.sale {
						margin: 10rpx 0;
						color: #aaa;
					}
					.out {
						color: #aaa;
					}
				}
				.time {
					// width: 20%;
					font-size: 24rpx;
					.state {
						border: 1rpx solid #F5AC3C;
						padding: 5rpx 15rpx;
						border-radius: 10rpx;
						color: #aaa;
					}
					.hour {
						color: #aaa;
						padding: 5rpx 15rpx;
					}
				}
			}
			.speacl {
				padding: 30rpx 0;
				border-top: 1rpx solid #f4f4f4;
			}
			.show_bot {
				display: flex;
				justify-content: space-around;
				padding-left: 20%;
				.count_deal {
					// text-align: center;
				}
				.img_deal {
					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 10rpx;
					}
				}
				.food_name {
					font-size: 24rpx;
					color: #aaa;
				}
				.money {
					color: #ED2121 ;
					font-size: 24rpx;
				}
			}
		}
	}
</style>